<template>
	<view class="container">
		<NavBar title="支付收银台"></NavBar>
		<view class="orderWrap">
			<view class="orderHeader">
				<view class="imgWrap">
					<image src="/static/images/success.png"></image>
				</view>
				<view class="orderInfo">
					<text class="title">订单提交成功，待支付！</text>
					<view class="time"> 
						<text class="time_content">
							剩余支付时间：
						</text>
						<text class="time_date" v-if="timeList.length != 0">
							{{timeList[0]}}
						</text>
					</view>
					<text class="totalPrice">应付总金额：<text class="price">{{totalPrice}}积分</text></text>
				</view>
			</view>
			<view class="orderDetail">
				<view class="orderNumWrap">
					<text class="tip">订单号:</text>
					<text class="orderNum">{{orderNum}}</text>
				</view>
				<view class="addressWrap">
					<text class="tip">收货信息:</text>
					<view class="address">
						<text class="info">{{addressInfo.info}}</text>
						<text class="detail">{{addressInfo.address}}</text>
					</view>
				</view>
				<view class="proInfo">
					<text class="tip">商品信息:</text>
					<view class="proList">
						<view class="proItem" v-for="(item,index) of unpaidOrderList" :key="item._id">
							<view class="picWrap">
								<image :src="item.pid.coverPic"></image>
							</view>
							<text class="title">{{item.pid.title}}</text>
							<text class="price">{{item.pid.price}}</text>
							<text class="num">x{{item.number}}</text>
							<text class="totalPrice">{{item.totalPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btnWrap">
			<button @click="submitPaid">立即支付 {{totalPrice}} 积分</button>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				orderNum:'',
				oid:[],
				unpaidOrderList:[],
				timeList: [],
				timer: null,
				paidStatus:false
			}
		},
		computed: {
			totalPrice () {
			  let price = 0
			  this.unpaidOrderList.forEach(item => {
			    price += item.totalPrice
			  })
			  return price
			},
			addressInfo () {
			  let obj = {}
			  if (this.unpaidOrderList.length>0) {
			    const addressInfo = this.unpaidOrderList[0].aid
			    const { name, mobile, province, city, detail } = addressInfo
				obj.info = name + '-' + mobile
			    obj.address = province + '-' + city + '-' + detail
			  }
			  return obj
			},
			orderEnd () {
			  if(this.unpaidOrderList.length>0){
			    const orderTime = this.unpaidOrderList[0].created
			    const format = moment(orderTime).format('YYYY-MM-DD HH:mm:ss')
			    const endTime = moment(format).add(15, 'm')
			    return endTime
			  }
			}
		},
		onLoad(data){
			const orderInfo = JSON.parse(data.orderInfo)
			if(orderInfo.orderNum !== undefined){
				this.oid=orderInfo.oid
				this.orderNum = orderInfo.orderNum
			}
		},
		onReady(){
			this.getUnpaidOrder()
			this.countDown()
		},
		watch: {
		  timeList (n, o) {
		    if (n[0] === '00分01秒') {
		      clearInterval(this.timer)
		    }
		  }
		},
		methods:{
			async getUnpaidOrder(){
				const {code,data} = await this.$axios.api.getUnpaidOrder({
					orderNumber: this.orderNum,
					oid:this.oid
				})
				if(code === 200){
					this.unpaidOrderList=data
				}
			},
			countDown () {
				this.timer = setInterval(() => {
					this.timeList = [] 
					const timeVal = moment(this.orderEnd).format('X') - moment().format('X')
					var d = Math.floor(timeVal / (24 * 3600))
					var h = Math.floor((timeVal - 24 * 3600 * d) / 3600)
					var m = Math.floor((timeVal - 24 * 3600 * d - h * 3600) / 60)
					var s = Math.floor((timeVal - 24 * 3600 * d - h * 3600 - m * 60))
					var mm = m < 10 ? '0' + m : m
					var ss = s < 10 ? '0' + s : s
					this.timeList.push(mm + '分' + ss + '秒')
				}, 1000)
			},
			async deleteOrder(){
				const {code,msg} = await this.$axios.api.delOrder({
					orderNumber: this.orderNum,
					oid:this.oid
				}) 
			},
			async submitPaid(){
				const {code,data} =await this.$axios.api.paid({
					orderNumber:this.orderNum,
					oid:this.oid
				})
				if(code === 200){
					const userInfo = this.$store.state.auth.userInfo
					userInfo.isVip = data.isVip
					userInfo.fav = data.fav
					this.$store.commit('setUserInfo',userInfo)
					this.paidStatus = true
					uni.showToast({
						title:'支付成功!',
						icon:'success',
						duration:2000
					})
					setTimeout(()=>{
						uni.switchTab({
						  url:'/pages/My/My'
						})
					}, 2000)
				}else if(code === 500){
					uni.showToast({
						title: '您的积分不足!',
						icon: 'error',
						duration:2000
					})
					setTimeout(()=>{
						uni.switchTab({
						  url:'/pages/My/My'
						})
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	height: 100%;
}
.orderWrap{
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding:20rpx;
  box-sizing: border-box;
  background-color: rgb(244, 244, 244);
  .orderHeader{
    width: 100%;
    height: 200rpx;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 20rpx;
    background-color: #fff;
    .imgWrap{
      width: 140rpx;
      height: 140rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .orderInfo{
      flex: 1;
      height: 140rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .title{
        font-size: 30rpx;
        font-weight: bold;
      }
      .time{
        &_content{
			font-size: 24rpx;
			color: #666666;
		}
        &_date{
          color: rgb(31, 182, 131);
          font-size: 26rpx;
          font-weight: bold;
        }
      }
      .totalPrice{
        font-size: 26rpx;
        .price{
          color: rgb(31, 182, 131);
          font-size: 30rpx;
          font-weight: bold;
        }
      }
    }
  }
  .orderDetail{
    width: 100%;
    height: auto;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 20rpx;
    background-color: #fff;
	font-size: 28rpx;
    margin-top: 20rpx;
    .orderNumWrap,.addressWrap,.proInfo{
      width: 100%;
      min-height: 140rpx;
      display: flex;
      align-items: center;
      .tip{
        width: 120rpx;
        text-align: center;
      }
      .orderNum,.address{
        flex: 1;
        text-align: center;
      }
	  .address{
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
	  }
    }
    .proInfo{
      height: auto;
      .proList{
        flex: 1;
        height: auto;
        display: flex;
        flex-direction: column;
        .proItem{
          width: 100;
          height: 120rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx;
          box-sizing: border-box;
          .picWrap{
            width: 100rpx;
            height: 100rpx;
            image{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
.btnWrap{
  width: 100%;
  height: 160rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  button{
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 20rpx;
    background-color: rgb(31, 182, 131);
    color: #fff;
    font-size: 26rpx;
  }
}
</style>
